<template>
    <div class="basic_info">
      <div class="info_operation_btn">
        <div class="btn_left">
          <el-button type="primary" @click="toNewOrder()">新单(N)</el-button>
          <el-button
            @click="exportExcel()"
            :disabled="!buttonsPermissions.DaoChu"
            :class="!buttonsPermissions.DaoChu ? 'disabled_button' : ''"
          >导出</el-button>
          <el-button
            :disabled="!buttonsPermissions.DaYin"
            :class="!buttonsPermissions.DaYin ? 'disabled_button' : ''"
            @click="handleShortcutKeyPrint"
          >打印(P)</el-button>
          <el-checkbox
            v-model="queryData.hideRedRushFlag"
            style="margin-left: 10px;"
            @change="queryClick"
          >隐藏红冲单据</el-checkbox>
          <el-checkbox
            v-model="queryData.hideInvalidFlag"
            style="margin-left: 10px;"
            @change="queryClick"
          >隐藏作废单据</el-checkbox>
        </div>
        <div class="btn_right">
          <el-input v-model="orderNumberParam" placeholder="请输入单据编号\往来单位名称\关键字搜索" />
          <el-button type="primary" @click="queryClick">搜索</el-button>
          <el-button @click="onRefresh">刷新</el-button>
          <i @click="onShowColumn()" class="set_up el-icon-s-tools"></i>
        </div>
      </div>
      <div class="info_content_div">
        <div class="div_table">
          <div class="div_screen">
            <div class="screen_left">
            <!-- 往来单位 -->
              <div class="custom_item">
                <div class="item_title">往来单位</div>
                <el-tooltip
                  effect="dark"
                  :content="getDictTextById(gysOptions, queryData.xghCompanyId, 'companyName')"
                  :enterable="false"
                  placement="bottom-start"
                  :disabled="this.getHideToolTipById(gysOptions, queryData.xghCompanyId, 'companyName')"
                >
                  <div class="custom_select_head">
                    <el-select
                      v-model="queryData.xghCompanyId"
                      style="width:100%;"
                      filterable
                      ref="gongyingshang"
                      @visible-change="(value) => handleFilterMethod('', 'companyName')"
                      :filter-method="(value) => handleFilterMethod(value, 'companyName')"
                    >
                      <el-option
                        v-for="item in gysOptions"
                        :key="item.id"
                        :label="item.companyName"
                        :value="item.id"
                      ></el-option>
                    </el-select>
                    <div class="custom_more">
                      <i class="el-icon-more" @click.stop="onShowSupplier"></i>
                    </div>
                  </div>
                </el-tooltip>
              </div>
              <!-- 经手人 -->
              <div class="custom_item">
                <div class="custom_star">
                  <div class="item_title">经手人</div>
                </div>
                <div class="custom_select_head">
                  <el-select
                    v-model="queryData.sysUserId"
                    style="width:100%;"
                    filterable
                    ref="jingshouren"
                    @visible-change="(value) => handleFilterMethod('', 'realname')"
                    :filter-method="(value) => handleFilterMethod(value, 'realname')"
                  >
                    <el-option
                      v-for="item in jsrOptions"
                      :key="item.id"
                      :label="item.realname"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </div>
              </div>
              <!-- 单据状态 -->
              <div class="custom_item">
                <div class="item_title">单据状态</div>
                <div class="custom_select_head">
                  <el-select
                    v-model="queryData.orderStatus"
                    style="width:100%;"
                    filterable
                    ref="deptSelect"
                  >
                    <el-option
                      v-for="item in djztOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </div>
              </div>
              <!-- 单据编号 -->
              <div class="custom_item">
                <div class="item_title">单据编号</div>
                <el-tooltip
                  effect="dark"
                  :content="queryData.orderNumber"
                  :enterable="false"
                  placement="bottom-start"
                  :disabled="queryData.orderNumber.length <= 6"
                >
                  <div class="custom_select_head">
                    <el-input type="text" v-model="queryData.orderNumber" placeholder="请输入" />
                  </div>
                </el-tooltip>
              </div>
            </div>
            <div class="screen_right">
              <div class="right_top">
                <el-select v-model="monthValue" @change="changeDate">
                  <el-option v-for="item in monthOptions" :key="item" :label="item" :value="item"></el-option>
                </el-select>
                <el-date-picker
                  v-model="nowDate"
                  type="daterange"
                  range-separator="~"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  @change="onClickPicker"
                  value-format="yyyy-MM-dd"
                ></el-date-picker>
                <el-button type="primary" @click="queryClick">查询</el-button>
              </div>
            </div>
          </div>
          <div class="table_content">
            <el-table
              ref="tableList"
              show-summary
              :summary-method="getSummaries"
              highlight-current-row
              :header-cell-style="{
              color: '#666666',
              textAlign: 'center',
              height: '30px',
              borderColor: '#dddddd',
            }"
              :cell-style="{ textAlign: 'center' }"
              :data="tableData.records"
              height="100%"
              style="width: 100%"
              @row-dblclick="onRowDblClick"
            >
              <el-table-column :resizable="false" label="序号" type="index" width="50"></el-table-column>
              <template v-for="(item, index) in columnData">
                <el-table-column
                  :show-overflow-tooltip="true"
                  :key="index"
                  :label="item.zidingyiName ? item.zidingyiName : item.morenName"
                  v-if="item.zidingyiState"
                  :prop="item.props"
                  :sortable="item.sortable"
                  min-width="120px"
                  :width="item.props == 'xh' ? '50px' : item.cellWidth"
                >
                  <template slot-scope="scope">
                    <span
                      v-if="item.props == 'payPrice' || item.props == 'rebatePrice'"
                    >{{ $formatMoney(scope.row[item.props]) }}</span>
                    <span v-else>{{ scope.row[item.props] }}</span>
                  </template>
                </el-table-column>
              </template>
            </el-table>
          </div>
          <div class="table_pagination">
            <div class="pagination_div">
              <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[20, 50, 100, 200]"
                :page-size="pagesize"
                layout="jumper, prev, pager,next, sizes"
                :total="tableData.total"
              ></el-pagination>
            </div>
          </div>
        </div>
      </div>
      <!-- 列配置弹框 -->
      <CConfiguration
        ref="setColumnRef"
        :columnDataArr="columnData"
        :defaultColumnDataArr="defaultColumnData"
        orderType="一般费用单管理"
        @onSaveColumn="onSaveColumn"
      ></CConfiguration>
      <!-- 选择往来单位弹框  -->
      <DialogSupplier ref="supplierRef" @onSelectSupplier="onSelectSupplier"></DialogSupplier>
      <!-- 新增往来单位弹框 -->
      <DialogSupplierAdd ref="supplierAddRef" @onAddSubmit="onAddSupplier"></DialogSupplierAdd>
      <!-- 打印 -->
      <dialog-print ref="print"></dialog-print>
    </div>
  </template>
  
  <script>
  import CConfiguration from '@/components/c_column/columnConfiguration1'
  import DialogSupplier from '../../components/dialogSupplier'
  import DialogSupplierAdd from '../../components/dialogSupplierAdd'
  /**打印 */
  import dialogPrint from '@/views/components/dialogPrintRecord'
  import { getAction, postAction, downPostFile } from '@/api/manage'
  // 导入调用处理权限数据方法
  import { handlePermissions, handleOtherPerms, } from '@/utils/index'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import { delcommafy, getLikeCompanyId } from '../../../utils'
  export default {
    name: 'billGeneralManage',
    components: {
      CConfiguration,
      DialogSupplier,
      DialogSupplierAdd,
      dialogPrint,
    },
    mixins: [JeecgListMixin],
    computed: {
    //   权限设置   要更改
      buttonsPermissions () { return handlePermissions('一般费用单管理') },
      printPermissions () {
        return handleOtherPerms('单据可多次打印')
      },
    },
    created () {
      this.getData()
  
    },
    watch: {
    },
    data () {
      return {
        // 往来单位
        gysOptions: [],
        // 入货仓库
        ckOptions: [],
        // 经手人
        jsrOptions: [],
        // 单据状态:0.待审核5.审核通过10.作废15.反审20.红冲25.终止30.完成
        djztOptions: [
          {
            value: '-1',
            label: '全部',
          },
          {
            value: '5',
            label: '已审核',
          },
          {
            value: '0',
            label: '未审核',
          },
          {
            value: '10',
            label: '已作废',
          },
          {
            value: '20',
            label: '已红冲',
          },
        ],
        // 查询条件数据
        orderNumberParam: '', // 单据编号/往来单位
        queryData: {
          hideRedRushFlag: false, // 1选中显示红冲
          hideInvalidFlag: false, //隐藏作废单据
          xghCompanyId: '', // 往来单位id
          sysUserId: '', // 经手人id
          orderNumber: '', // 单据编号
          orderStatus: '-1', // 单据状态:0.待审核5.审核通过10.作废15.反审20.红冲25.终止30.完成
          startDate: '', // 开始时间
          endDate: '', //结束时间
        },
        // 月份选择
        monthValue: '本月',
        monthOptions: ['今日', '本周', '本月', '本年'],
        isShowDate: true, // 是否显示选择时间组件
        nowDate: [],
        // 表格数据
        tableData: {},
        // 列配置数据
        defaultColumnData: [],
        columnData: [
          {
            morenName: '单据日期',
            zidingyiName: '',
            morenState: true,
            cellWidth: '165px',
            zidingyiState: true,
            noModify: false,
            sortable: true,
            props: 'createOrderDate',
          },
          {
            morenName: '单据编号',
            zidingyiName: '',
            morenState: true,
            cellWidth: '170px',
            zidingyiState: true,
            noModify: false,
            sortable: false,
            props: 'orderNumber',
          },
          {
            morenName: '往来单位名称',
            zidingyiName: '',
            morenState: true,
            cellWidth: '165px',
            zidingyiState: true,
            noModify: false,
            sortable: false,
            props: 'xghCompanyId_dictText',
          },
          {
            morenName: '付款账户',
            zidingyiName: '',
            morenState: true,
            cellWidth: '162px',
            zidingyiState: true,
            noModify: false,
            sortable: false,
            props: 'bankId_dictText',
          },
          {
            morenName: '付出金额',
            zidingyiName: '',
            morenState: true,
            cellWidth: '162px',
            zidingyiState: true,
            noModify: false,
            sortable: true,
            props: 'payPrice',
          },
          {
            morenName: '优惠金额',
            zidingyiName: '',
            morenState: true,
            cellWidth: '162px',
            zidingyiState: true,
            noModify: false,
            sortable: true,
            props: 'rebatePrice',
          },
          {
            morenName: '经手人',
            zidingyiName: '',
            morenState: true,
            cellWidth: '162px',
            zidingyiState: true,
            noModify: false,
            sortable: false,
            props: 'sysUserId_dictText',
          },
          {
            morenName: '单据状态',
            zidingyiName: '',
            morenState: true,
            cellWidth: '162px',
            zidingyiState: true,
            noModify: false,
            props: 'orderStatus_dictText',
          },
          {
            morenName: '单据备注',
            zidingyiName: '',
            morenState: true,
            cellWidth: '162px',
            zidingyiState: true,
            noModify: false,
            props: 'remark',
          },
          {
            morenName: '单据附记',
            zidingyiName: '',
            morenState: true,
            cellWidth: '162px',
            zidingyiState: true,
            noModify: false,
            sortable: false,
            props: 'postscript',
          },
        ],
        pagesize: 20, //每页的数据条数
        currentPage: 1, //默认开始页面
        updateId: '', // 修改列配置时返回的id
        url: {
          listUrl: '/costOrder/xghGeneralCostOrder/orderManageList',
          api: '一般费用单管理',
          exportXlsUrl: '/xghPurchaseOrder/xghPurchaseOrder/exportPurchaseRecordXls'
        }
      }
    },
    mounted () {
  
    },
    methods: {
      // 打印
      async handleShortcutKeyPrint () {
        // 查询
        let params = {
          ...this.queryData,
          orderStatus: this.queryData.orderStatus == -1 ? undefined : this.queryData.orderStatus,
          // orderNumber: `*${this.queryData.orderNumber}*`,
          orderNumber: this.queryData.orderNumber,
          orderNumberParam: this.orderNumberParam,
          companyIdParam: getLikeCompanyId(this.gysOptions, this.orderNumberParam)
        }
        let data = {
          ...params,
          orderType: '27',
          pageSize: 1000000,
          pageNo: 1,
        }
        let printExclusive = []
        const res = await getAction(this.url.listUrl, data)
        if (res.code !== 200) {
          return this.$elMessage.error('获取数据失败！')
        }
        printExclusive = res.result.records || []
        printExclusive.forEach((item) => {
          item.createOrderDate = item.createOrderDate.substring(0, 10)
          // item.orderTime = item.orderTime.substring(0, 10)
          // item.doneTime = item.status == 1 ? item.arrivalTime : ''
        })
        this.queryClick()
        // 打印
        if (!this.buttonsPermissions.DaYin) {
          this.$elMessage.warning('未拥有打印权限！')
        } else if (!printExclusive || printExclusive.length <= 0) {
          this.$elMessage.warning('没有要打印的记录！')
        } else {
          let printData = {
            riqi: this.queryData.startDate + '~' + this.queryData.endDate,
            wanglaidanwei: this.$refs.gongyingshang.selected.label,
            jingshouren: this.$refs.jingshouren.selected.label,
            printExclusive,
          }
          // 可以多次打印设置
          if (this.printPermissions) {
            this.$refs.print.show(printData, this.columnData, '一般费用单管理')
          } else {
            if (this.$lcStorage.get('printLimitValue')) {
              // 获取打印次数
              this.getPrintNum('一般费用单管理', (() => {
                this.$refs.print.show(printData, this.columnData, '一般费用单管理')
              }))
            } else {
              this.$refs.print.show(printData, this.columnData, '一般费用单管理')
            }
          }
        }
      },
      // 初始化获取数据
      getData () {
        this.getTimeRange(this.$setTimeRange(5)) // 默认获取当月时间
        this.getGysStorage() // 获取往来单位信息数据
        this.getStaffData() // 获取经手人信息数据
        this.selectTitle()
        this.queryClick()
      },
      // 初始化查询列配置值
      async selectTitle () {
        let obj = await this.$setColumn.selectColumn(this.url.api)
        console.log(obj);
        if (obj.code === 200) {
          this.updateId = obj.updateId
          this.columnData = obj.columnData
        } else if (obj.code === 500) {
          let id = await this.$setColumn.addColumn(this.url.api, this.$options.data().columnData)
          this.updateId = id
        }
      },
      // 修改列配置后保存修改后的值
      async onSaveColumn (value) {
        this.columnData = value
        let res = await this.$setColumn.editColumn(this.url.api, this.columnData, this.updateId)
        if (res.code == 200) {
          this.$elMessage.success(res.message)
        } else {
          this.$elMessage.error(res.message)
        }
      },
      queryClick () {
        this.currentPage = 1
        this.getTableData()
      },
      // 获取表格信息数据
      async getTableData () {
        let data = {
          ...this.queryData,
          orderStatus: this.queryData.orderStatus == -1 ? undefined : this.queryData.orderStatus,
          // orderNumber: `*${this.queryData.orderNumber}*`,
          orderNumber: this.queryData.orderNumber,
          //上面搜索
          orderNumberParam: this.orderNumberParam,
          companyIdParam: getLikeCompanyId(this.gysOptions, this.orderNumberParam),
          orderType: '27',
          pageSize: this.pagesize,
          pageNo: this.currentPage,
        }
        const res = await getAction(this.url.listUrl, data)
        if (res.code !== 200) {
          return this.$elMessage.error('获取数据失败！')
        }
        this.tableData = res.result
        console.log('表格数据',this.tableData);
        this.tableData.records.forEach((item) => {
          item.createOrderDate = item.createOrderDate.substring(0, 10)
        //   item.orderTime = item.orderTime.substring(0, 10)
          // item.doneTime = item.status == 1 ? item.arrivalTime : ''
        })
      },
      // 获取往来单位数据列表
      getGysStorage () {
        getAction('/xghCompany/xghCompany/listNoPage', {}).then((res) => {
          if (res.code === 200) {
            this.gysOptions = res.result
            this.totalCompanys = res.result
          } else {
            this.$elMessage.error(res.message)
          }
        })
      },
      // 获取经手人数据列表
      async getStaffData () {
        getAction('/dept/xghAccountBookDept/getAllDeptUsers', {}).then((res) => {
          if (res.code === 200) {
            this.jsrOptions = res.result
            this.totalPersons = res.result
          }
        })
      },
      // 新单 跳转至一半费用单新单页面
      toNewOrder () {
        this.$router.push({
          path: '/paymentManage/paymentBill/billGeneralSettlement',
        })
      },
      // 导出  需要修改
    //   exportExcel () {
  
    //     let params = {
    //       ...this.queryData,
    //       status: this.queryData.status == -1 ? undefined : this.queryData.status,
    //       orderStatus: this.queryData.orderStatus == -1 ? undefined : this.queryData.orderStatus,
    //       orderNumber: `*${this.queryData.orderNumber}*`,
    //       orderNumberParam: this.orderNumberParam,
    //       companyIdParam: getLikeCompanyId(this.gysOptions, this.orderNumberParam),
    //       fileName: '一般费用单管理'
    //     }
    //     this.handleExportXlsByStaff('一般费用单管理', params)
    //   },
      // 刷新
      onRefresh () {
        Object.assign(this.$data, this.$options.data())
        this.getData()
      },
      // 打开新增客户弹出框
    //   onShowSupplierAdd () {
    //     this.$refs.supplierAddRef.dialogVisible = true
    //   },
      // 新增客户数据
      onAddSupplier (res) {
        // 先清空新增客户时的数据
        // 把当前新增值的客户名称展示在输入框内,做数据存储
        this.onSelectSupplier(res)
        // 调用子组件的数据更新方法
        this.$refs.supplierRef.getData()
      },
      // 打开选择客户弹出框
      onShowSupplier () {
        this.$refs.supplierRef.dialogVisible = true
      },
      // 当前选择往来单位数据
      onSelectSupplier (val) {
        this.queryData.xghCompanyId = val.id
      },
      // 判断当前选择时间段
      changeDate (val) {
        switch (val) {
          case '全部':
            this.getTimeRange({
              now: '',
              end: ''
            })
            break
          case '今日':
            this.getTimeRange(this.$setTimeRange(1))
            break
          case '昨天':
            this.getTimeRange(this.$setTimeRange(2))
            break
          case '本周':
            this.getTimeRange(this.$setTimeRange(3))
            break
          case '上周':
            this.getTimeRange(this.$setTimeRange(4))
            break
          case '本月':
            this.getTimeRange(this.$setTimeRange(5))
            break
          case '上月':
            this.getTimeRange(this.$setTimeRange(6))
            break
          case '本年':
            this.getTimeRange(this.$setTimeRange(7))
            break
          case '去年':
            this.getTimeRange(this.$setTimeRange(8))
            break
          default:
            break
        }
      },
      // 获取时间范围并设置
      getTimeRange (data) {
        this.nowDate = [data.now, data.end]
        this.queryData.startDate = data.now
        this.queryData.endDate = data.end
      },
      // 获取当前选中时间
      onClickPicker (val) {
        this.queryData.startDate = val[0]
        this.queryData.endDate = val[1]
      },
      // 触发列配置弹框
      onShowColumn () {
        this.defaultColumnData = this.$options.data().columnData
        this.$refs.setColumnRef.dialogVisible = true
      },
      // 双击跳转
      onRowDblClick (row) {
        this.$toBillDetail(this, row.orderType, row.id)
      },
      // 合计列计算  需要修改
      getSummaries (param) {
        this.$nextTick(() => {
          this.$refs.tableList.doLayout();
        })
        const { columns, data } = param
        const sums = []
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '合计'
          } else if (index === 1) {
            sums[index] = '共' + this.tableData.total + '条明细'
          } else if (column.property === 'payPrice'|| column.property ==='rebatePrice') {
            const values = data.map((item) => delcommafy(item[column.property]))
            if (!values.every((value) => isNaN(value))) {
              sums[index] = values.reduce((prev, curr) => {
                const value = delcommafy(curr)
                if (!isNaN(value)) {
                  return prev + curr
                } else {
                  return prev
                }
              }, 0)
              sums[index] = this.$formatMoney(sums[index])
            }
          } else {
            sums[index] = ''
          }
        })
        return sums
      },
      // 获取每页几条数据
      handleSizeChange (val) {
        this.pagesize = val
        this.getTableData()
      },
      // 获取当前第几页
      handleCurrentChange (val) {
        this.currentPage = val
        this.getTableData()
      },
      // 历史记录数据去重并只展示三个数据方法
    //   selectDataHas (arr) {
    //     let map = new Map()
    //     for (const item of arr) {
    //       if (!map.has(item.id)) {
    //         map.set(item.id, item)
    //       }
    //     }
    //     let newArr = [...map.values()]
    //     return newArr.slice(0, 3)
    //   },
      // 搜索
      handleFilterMethod (value, label) {
        if (label == 'companyName') {
          this.gysOptions = this.filterMethod(this.gysOptions, value, label)
        } else if (label == 'realname') {
          this.jsrOptions = this.filterMethod(this.jsrOptions, value, label)
        }
      },
    },
  }
  </script>
  
  <style lang="scss" scoped>
  .basic_info {
    width: 100%;
    height: calc(100vh - 102px);
    background: #f0f2f5;
    box-sizing: border-box;
    padding: 0 0.168761rem 0.168761rem;
    display: flex;
    flex-direction: column;
  }
  
  .info_operation_btn {
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
  
    .el-button {
      width: 70px;
      height: 30px;
      text-align: center;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      border-radius: 5px;
      border: none;
      margin-right: 6px;
    }
  
    .el-button--default {
      color: #666;
    }
  
    .btn_left {
      width: 60%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
  
      p {
        font-size: 12px;
        color: #666;
        margin: 0 0.1rem 0 0.187512rem;
      }
  
      ::v-deep .el-checkbox {
        margin-right: 1px;
  
        .el-checkbox__label {
          font-size: 12px;
          padding-left: 0.1rem;
        }
      }
  
      ::v-deep .el-select {
        width: 70px;
        height: 40px;
        box-sizing: border-box;
        margin-right: 0.187512rem;
  
        .el-input {
          .el-input__inner {
            height: 40px;
            border: none;
            font-size: 12px;
          }
  
          .el-input__suffix {
            height: 40px;
            display: flex;
            align-items: center;
          }
        }
      }
  
      .selectSty {
        width: 2.625164rem;
      }
    }
  
    .btn_right {
      width: 40%;
      display: flex;
      justify-content: flex-end;
      align-items: center;
  
      .el-input {
        width: 250px;
        height: 30px;
        margin-right: 0.112507rem;
  
        ::v-deep .el-input__inner {
          height: 30px;
          border: none;
          box-sizing: border-box;
          padding: 0 0.15rem;
          background: #fff;
          font-size: 12px;
          color: #666;
  
          &::placeholder {
            font-size: 12px;
            color: #c1c1c1;
          }
        }
      }
  
      .set_up {
        font-size: 23px;
        color: rgb(153, 153, 153);
      }
    }
  }
  
  .info_content_div {
    width: 100%;
    height: calc(100% - 60px);
    background: #fff;
    box-sizing: border-box;
    padding: 10px;
    display: flex;
  
    .div_table {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      // justify-content: space-between;
      transition: all 0.3s;
  
      .div_screen {
        width: 100%;
        // height: 100px;
        margin-bottom: 10px;
        display: flex;
        justify-content: space-between;
  
        .screen_left {
          font-size: 12px;
          box-sizing: border-box;
          display: flex;
          justify-content: flex-start;
          flex-wrap: wrap;
          min-width: 600px;
        }
  
        .screen_right {
          .right_top {
            margin-right: 20px;
            box-sizing: border-box;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            box-sizing: border-box;
            padding-top: 10px;
          }
  
          ::v-deep .el-button {
            // width: 60px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            border-radius: 5px;
            border: none;
          }
  
          ::v-deep .el-select {
            width: 80px;
            margin: 0 10px;
  
            .el-input {
              .el-input__inner {
                height: 30px;
                border-color: #e3e3e3;
                font-size: 12px;
                padding-left: 5px;
              }
  
              .el-input__suffix {
                height: 30px;
                display: flex;
                align-items: center;
              }
            }
          }
  
          ::v-deep .el-date-editor {
            width: 220px;
            height: 30px;
            background: #ffffff;
            border: 1px solid #d9d9d9;
            margin-right: 0.112507rem;
            padding: 3px 6px;
  
            .el-range__icon {
              position: absolute;
              right: 0;
              line-height: 30px;
            }
  
            .el-range-separator {
              line-height: 24px;
            }
  
            .el-range-input {
              font-size: 12px;
            }
  
            .el-range__close-icon {
              display: none;
            }
          }
        }
      }
  
      .table_content {
        height: calc(100% - 150px);
  
        ::v-deep .el-table {
          border: 1px solid #e3e3e3;
          border-bottom: none;
          box-sizing: border-box;
          height: 100%;
  
          th,
          td {
            padding: 0;
            color: #666;
            box-sizing: border-box;
            border-right: 1px solid #e3e3e3;
  
            .cell {
              height: 30px;
              display: flex;
              align-items: center;
              font-size: 12px;
            }
  
            &:first-child {
              .cell {
                justify-content: center;
                padding: 0;
              }
            }
  
            &:nth-child(2) {
              .cell {
                justify-content: center;
              }
            }
  
            &:last-child {
              .cell {
                justify-content: center;
              }
            }
          }
  
          th {
            .cell {
              background: #ededed;
              justify-content: center;
            }
          }
  
          .el-checkbox {
            .is-indeterminate {
              .el-checkbox__inner {
                color: #1b93f9;
                background-color: #1b93f9;
                border-color: #1b93f9;
              }
            }
          }
  
          .el-icon-edit-outline {
            font-size: 0.25rem;
            color: #1b93f9;
            margin-right: 0.037502rem;
          }
  
          .el-icon-delete {
            font-size: 0.25rem;
            color: #ff2626;
            margin-left: 0.037502rem;
          }
  
          .el-table__body tr:hover > td {
            background: #e3f6ff;
          }
  
          .el-table__footer-wrapper {
            td {
              background: #f4f4f4;
              border: none;
            }
          }
  
          //滚动条的宽度
          ::-webkit-scrollbar {
            width: 10px;
            height: 10px;
            background-color: #e5e5e5;
          }
  
          //滚动条的滑块
          ::-webkit-scrollbar-thumb {
            background-color: #c9c9c9;
          }
        }
      }
  
      .table_pagination {
        .total {
          margin-top: 0.25rem;
          width: 3.750234rem;
          font-size: 12px;
          color: #666666;
        }
  
        width: 100%;
        height: 50px;
        box-sizing: border-box;
        padding: 10px 0;
        display: flex;
  
        .pagination_div {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: flex-end;
  
          ::v-deep .el-pagination {
            padding: 0;
            height: 30px;
  
            .el-pagination__sizes {
              margin: 0;
  
              .el-input {
                margin-right: 0;
              }
            }
          }
        }
      }
    }
  }
  
  .custom_item {
    display: flex;
    align-items: center;
    margin: 10px 44px 10px 0;
    width: 180px;
    font-size: 12px;
  }

  .item_title {
    padding: 0 5px;
    width: auto;
    min-width: 60px;
    line-height: 30px;
    color: #666666;
    text-justify: distribute-all-lines;
    /*ie6-8*/
    text-align-last: justify;
    /* ie9*/
    -moz-text-align-last: justify;
    /*ff*/
    -webkit-text-align-last: justify;
    /*chrome 20+*/
  }
  
  .custom_select_head {
    flex: 1;
    height: 30px;
    position: relative;
  
    ::v-deep .el-select {
      .el-input {
        .el-input__inner {
          height: 30px;
          border-color: #e3e3e3;
          font-size: 12px;
          padding-left: 5px;
        }
  
        .el-input__suffix {
          height: 30px;
          display: flex;
          align-items: center;
        }
      }
    }
  
    ::v-deep .el-input {
      width: 100%;
  
      .el-input__inner {
        height: 30px;
        border-color: #e3e3e3;
        font-size: 12px;
        padding-left: 5px;
      }
  
      .el-input__suffix {
        height: 30px;
        display: flex;
        align-items: center;
      }
    }
  }
  
  .custom_more {
    position: absolute;
    right: 10px;
    z-index: 10;
    top: 1px;
    background: #fff;
    height: 28px;
    display: flex;
    align-items: center;
    color: #bfbfbf;
  }
  
  .custom_add {
    display: flex;
    justify-content: center;
    align-items: center;
  
    span {
      margin-left: 5px;
      color: #666666;
    }
  
    i {
      color: #666666;
    }
  }
  
  .disabled_button {
    background: #cbced3 !important;
    color: #666 !important;
  }
  </style>